<template>
  <div class="userlevel-wrapper">
    <div class="serach-wrapper">
      <Input v-model="food_name" placeholder="请输入城市名称" style="width: 300px"></Input>
      <Button :disabled="food_name.length <= 0"  @click="getList">开始抓取</Button>
      <Button>暂停</Button>
    </div>
    <div class="data-wrapper">
      <Table :loading="loading" border :columns="columns5" :data="list"></Table>
       <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
    </div>
  </div>

</template>

<script>
export default {
  data(){
    return {
      food_name: '',
      loading:false,
      columns5: [
        {
          title: '用户等级',
          key: 'vipLevel',
          sortable: true
        },
        {
          title: '平均人均消费(元)',
          key: 'avgAmount',
          sortable: true
        },
        {
          title: '消费占比',
          key: 'percentage_display'
        }
      ],
      list: [], 
      chartData: {
        columns: ['title','percentage'],
        rows: [
          { 'title': 'lv1', 'percentage': 3 },
          { 'title': 'lv2', 'percentage': 6 },
          { 'title': 'lv3', 'percentage': 90 },
          { 'title': 'lv4',  'percentage': 12 },
          { 'title': 'lv5',  'percentage': 15 }
        ]
      },
      chartSettings:{
        dimension: 'title',
        metrics: 'percentage'
      }
    }
  },
  methods:{
    getList(){
      let that = this
      that.loading = true;
      console.log('startGet')
      let url = `http://127.0.0.1:7001/analysis/userlevel`
      // let url = `http://127.0.0.1:7001/analysis/hotfoodcategories`
      axios.get(url)
      .then(function (response) {
        that.list = response.data.data;
        that.total_records = that.list.length;
        that.loading = false;
        console.log(that.list)
        that.chartData.rows[0].percentage = parseFloat( that.list[0].percentage) 
        that.chartData.rows[1].percentage = parseFloat( that.list[1].percentage) 
        that.chartData.rows[2].percentage = parseFloat( that.list[2].percentage) 
        that.chartData.rows[3].percentage = parseFloat( that.list[3].percentage) 
        that.chartData.rows[4].percentage = parseFloat( that.list[4].percentage) 
      })
      .catch(function (error) {
        console.log(error);
      }); 
    }
  }
}
</script>

<style>
   .userlevel-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
</style>
